<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--基本的进度条-->
		<div class="container">
			<div class="progress">
				<div class="progress-bar progress-bar-success" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-info" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-warning" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress">
				<div class="progress-bar progress-bar-danger" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
		</div>
		
		
		<!--条纹的进度条-->
        <div class="container">
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-success" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-info" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-warning" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress progress-striped">
				<div class="progress-bar progress-bar-danger" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
		</div>
		
		<!--动画的进度条-->
        <div class="container">
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-success" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-info" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-warning" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
			<div class="progress progress-striped active">
				<div class="progress-bar progress-bar-danger" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
		</div>
		
		<!--堆叠进度条-->
		<div class="container">
			<div class="progress progress-striped active ">
				<div class="progress-bar progress-bar-success " role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
					<span class="sr-only">40% 完成</span>
				</div>
				<div class="progress-bar progress-bar-info" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
					<span class="sr-only">40% 完成</span>
				</div>
				<div class="progress-bar progress-bar-warning" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
					<span class="sr-only">40% 完成</span>
				</div>
				<div class="progress-bar progress-bar-danger" role="progressbar" 
					aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
					<span class="sr-only">40% 完成</span>
				</div>
			</div>
		</div>
		
		
		
	</body>
</html>